<template>
  <van-nav-bar :title="t('skuScan.title')" left-arrow @click-left="onClickLeft" placeholder fixed/>
  <van-form class="mt-2">
    <scanning ref="skuCodeRef" @keydownEnter="handleScan" @rescan="rescan" :placeholder="t('skuScan.pleaseScanningSku')" isFocus clearable rescanable />
  </van-form>
  <div v-if="skuStockInfo.skuId">
    <van-cell-group class="mt-2">
      <van-cell size="large" :title="'SKU：' +  skuStockInfo.skuCode" title-style="font-weight: bold"/>
      <van-cell :title="t('skuScan.skuEnDesc') + skuStockInfo.goodsEnDesc" />
      <van-cell :title="t('skuScan.custCodeName') + skuStockInfo.customerCode + ' / ' + skuStockInfo.customerName" />
      <van-cell :title="t('skuScan.skuSpecs') + skuStockInfo.weight + ' / ' + skuStockInfo.length + '*' + skuStockInfo.width + '*' + skuStockInfo.height" />
    </van-cell-group>
    <van-cell-group class="mt-1 text-center p-2">
      <van-row>
        <van-col span="8">{{ t('skuScan.limit') }}</van-col>
        <van-col span="8">{{ t('skuScan.available') }}</van-col>
        <van-col span="8">{{ t('skuScan.stock') }}</van-col>
      </van-row>
      <van-row class="mt-1 font-bold">
        <van-col span="8">{{ 0 }}</van-col>
        <van-col span="8">{{ skuStockInfo.canSellNum }}</van-col>
        <van-col span="8">{{ skuStockInfo.inStockNum }}</van-col>
      </van-row>
    </van-cell-group>
    <van-cell-group class="text-center mt-1">
      <van-row class="font-bold py-2 van-hairline--surround ">
        <van-col class="van-hairline--right" span="8">{{ t('skuScan.location') }}</van-col>
        <van-col class="van-hairline--right" span="8">{{ t('skuScan.limit') }}</van-col>
        <van-col span="8">{{ t('skuScan.available') }}</van-col>
      </van-row>
      <van-row v-for="(item, i) in skuStockInfo.stockBatchVoList" :key="i" :class="adjustStockRequest.originalLocationCode == item.locationCode ? 'py-2 van-hairline--surround bg-blue-100' : 'py-2 van-hairline--surround'" @click="choose(item.locationCode)">
        <van-col class="van-hairline--right" span="8">{{ item.locationCode }}</van-col>
        <van-col class="van-hairline--right" span="8">0</van-col>
        <van-col span="8">{{ item.canUseStock }}</van-col>
      </van-row>
      <van-empty v-if="skuStockInfo.stockBatchVoList?.length <= 0" :description="t('noData')"/>
    </van-cell-group>
    <van-action-bar placeholder>
      <van-row gutter="10" class="w-full p-1">
        <van-col span="24">
          <van-button block plain type="primary" @click="showChangeLocation">{{ t('skuScan.changeLocation') }}</van-button>
        </van-col>
      </van-row>
    </van-action-bar>

    <van-action-sheet v-model:show="showAction" :title="t('skuScan.changeLocation')">
      <van-form @submit="onSubmitChangeLocation">
        <van-cell-group inset>
          <van-field
            v-model="adjustStockRequest.originalLocationCode"
            :label="t('skuScan.currentLocation')"
            readonly
          />
          <van-field ref="locationCodeRef"
            :rules="[{ required: true, message: t('skuScan.pleaseScanningLocation') }]"
            v-model="adjustStockRequest.currentLocationCode"
            submit-on-enter
            clearable
            :placeholder="t('skuScan.pleaseScanningLocation')"
          >
            <template #left-icon>
              <van-icon class="mr-2" name="enlarge" size="20"/>
            </template>
          </van-field>
        </van-cell-group>
        <div class="m-2">
          <van-button block type="primary" native-type="submit">
            {{ t('confirm') }}
          </van-button>
        </div>
      </van-form>
    </van-action-sheet>
  </div>
</template>

<script setup lang="ts">
import Scanning from "@/views/components/Scanning/index.vue";
import { useI18n } from "vue-i18n";
import { getRequest, postRequest, scanSuccess, scanFail } from "@/api";
import { nextTick } from "vue";

const { t } = useI18n();

const skuCodeRef = ref(null);
const locationCodeRef = ref(null);
const showAction = ref(false);
const skuStockInfo: any = ref({ skuCode:null });

const adjustStockRequest = ref({ skuId:null, originalLocationCode:null, currentLocationCode:null, remark:null });

const onClickLeft = () => history.back();
const choose = (locationCode: string) => adjustStockRequest.value.originalLocationCode = locationCode;
const showChangeLocation = () => {
  if (adjustStockRequest.value.originalLocationCode) {
    adjustStockRequest.value.currentLocationCode = null
    showAction.value = true;
    nextTick(() => locationCodeRef.value.focus());
  }
}

const rescan = () => {
  skuStockInfo.value = { skuCode:null };
}

const handleScan = (skuCode: string) => {
  getRequest("/stock/scan/" + skuCode, {}).then(res => {
    scanSuccess();
    skuStockInfo.value = res.data;
    adjustStockRequest.value.skuId = res.data.skuId;
    adjustStockRequest.value.originalLocationCode = res.data.stockBatchVoList[0]?.locationCode || "";
    skuCodeRef.value.setDisable();
  }).catch(() => {
    skuCodeRef.value.reset();
    scanFail()
  });
};

const onSubmitChangeLocation = () => {
  postRequest("/stock/scan/adjust", adjustStockRequest.value).then(() => {
    scanSuccess();
    handleScan(skuStockInfo.value.skuCode);
    showAction.value = false;
  }).catch(() => {
    scanFail()
  });
}
</script>

<style scoped lang="less">
:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.van-cell__label) {
  font-size: 1rem;
}
</style>
